<!--
 * @Author: your name
 * @Date: 2021-06-23 21:49:08
 * @LastEditTime: 2023-08-02 10:06:28
 * @LastEditors: pmy
 * @Description: In User Settings Edit
 * @FilePath: \bdcar-net\src\components\theOne\MenuNav.vue
-->
<template>
  <div class="menuConten" :class="{ menuConten_close: isPackUp }">
    <div class="log-div">
      <div :style="getLogoImg" class="logo-img"></div>
      <span
        style="font-size:1.6rem;font-weight:600;max-width:18rem;overflow: hidden;text-overflow: ellipsis;display: inline-block;white-space: nowrap;"
        v-show='!isPackUp' :title="sysTitle">{{ sysTitle }}</span>
    </div>
    <!-- 通过读取配置文件来循环生成菜单栏 -->
    <el-menu :collapse-transition='false' :default-active="activeMenu" class="myMenu" mode="vertical" @select="menuClick"
      :unique-opened="true" :collapse="isPackUp" text-color="#fbfbfb" active-text-color="#4B93FF">
      <el-submenu :index="v.index" v-for="v in MenuList" :key='v.index'>
        <template slot="title">
          <i class="icon iconfont" :class="'icon-' + v.index" style="margin:0 1rem 0 1rem;font-size: 2rem;"></i>
          <span>{{ v.label || v.name }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item v-for="vv in v.children" :index="vv.index" :key='vv.index'>
            <div class="menu-dot"></div>
            {{ vv.label || vv.name }}
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
export default {
  name: "MenuNav",
  data() {
    return {

    };
  },
  created() {
  },
  mounted() {

  },
  methods: {
    //点击以后向store传递点击的什么
    menuClick(key, keyPath) {
      this.$store.dispatch("updateActiveMenu", key);
    },
    getMenuImg(str) {
      return require(`../../assets/img/table/${str}.svg`)
    },
  },
  computed: {
    systemTitle() {
      if (this.currentUser?.companyName)
        return this.currentUser?.companyName
      else
        return "丝宝电商数据分析平台";
    },
    sysTitle() {
      return this.$store.state.sysTitle;
    },
    getLogoImg() {
      let logoUrl = null;
      if (this.currentUser.companyPic && this.currentUser.companyPic.length) {
        logoUrl = GlobalSetting.IotConfig.fileAPIService + this.currentUser.companyPic[0].path
      } else {
        logoUrl = require("../../assets/img/nav/logo.svg")
      }
      return { backgroundImage: 'url(' + logoUrl + ')' }
    },
    activeMenu() {
      return this.$store.state.activeMenu;
    },
    MenuList() {
      let List = this.$store.state.availableMenuList;
      return List;
    },
    //当前用户信息
    currentUser() {
      return this.$store.state.currentUser;
    },
    //是否收缩菜单栏
    isPackUp() {
      return this.$store.state.isPackUp;
    },
  },
};
</script>

<style lang="less" scoped>
@borderRadius: 8px;

.menuConten {
  position: absolute;
  width: 230px;
  top: 0;
  left: 0;
  bottom: 0;
  user-select: none;
  text-align: center;
  z-index: 3;
  font-size: 14px;
  font-family: PingFang SC;

  .menu-dot {
    width: 20px;
    position: relative;
  }

  .menu-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 15%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
    transform: translate(-50%, -50%);
  }

  ::v-deep .el-menu {
    background-color: rgba(0, 0, 0, 0) !important;
    border: 0;
  }

  ::v-deep .el-submenu {
    border-radius: @borderRadius;
  }

  ::v-deep .el-menu-item-group>ul {
    background-color: rgba(0, 0, 0, 0.3);
    overflow: hidden;
    border-radius: 0 0 @borderRadius @borderRadius;
  }

  // 一级菜单样式-start
  .base-title {
    background-color: unset !important;
    color: #4b93ff !important;
  }

  ::v-deep .el-submenu__title {
    text-align: left;
    padding: 0 10px !important;
    line-height: 50px;
    height: 50px;
    border-radius: @borderRadius;
    font-size: 16px;
  }

  ::v-deep .el-submenu__icon-arrow {
    right: 10px;
  }

  ::v-deep .el-submenu__title i {
    color: #dadada !important;
  }

  ::v-deep .el-submenu__title:hover i,
  ::v-deep .el-submenu.is-active i {
    color: #4b93ff !important;
  }

  ::v-deep .el-submenu__title:hover,
  ::v-deep .el-submenu.is-active .el-submenu__title {
    .base-title();
  }

  // 一级菜单样式-end

  // 二级菜单样式
  ::v-deep .el-menu-item {
    line-height: 48px;
    padding: 0 20px !important;
    margin: 0 10px;
    border-radius: 4px;
    height: unset;
    min-width: unset;
    text-align: left;
    white-space: unset;
    display: flex;
  }

  ::v-deep .el-menu-item-group__title {
    display: none;
  }

  // 二级菜单高亮样式
  ::v-deep .el-menu-item.is-active {
    color: #fff !important;
    background-color: #0066ff;
  }

  ::v-deep .el-menu-item:hover {
    color: #fff !important;
    background-color: #0066ff;
  }

  .shrink-menu {
    width: 100%;
    height: 100%;

    li {
      width: 42px;
      height: 37px;
      margin: 10px;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;

      &:hover,
      &.active {
        background-color: #1973ff;
      }
    }
  }
}

.log-div {
  width: 100%;
  padding: 10px 0;
  height: 60px;
  display: flex;
  align-items: center;

  .logo-img {
    background-position: center;
    background-repeat: no-repeat;
    width: 56px;
    height: 59px;
    display: inline-block;
  }
}

.menuConten_close {
  width: 64px;
}
</style>
